<template>
	<view>
		<view class="box">
			<view class="reserveTime">
				<view>预约时间：</view>
				<view>{{ data.reservatio_time }}</view>
			</view>
			<view class="hr"></view>
			<view v-for="(item, index) in list" class="list">
				<view class="title">{{ item.pusherText }}</view>
				<view class="'player">
					<view v-for="(src, i) in item.pusher">
						<image src="https://new.kuxia.top/uploads/image/20220930/f8c5ebc149a1198cb2aa3c7650b391ea.png"
							@click="player(src, i, index)" v-show="!item.playerStatus[i]" />
						<image src="https://new.kuxia.top/uploads/image/20220930/3fdaef218f2875841df6c5f8abfb1a20.png"
							@click="stopPlayerPusher(src, i, index)" v-show="item.playerStatus[i]" />
					</view>

				</view>
				<view class="title">{{ item.imageText }}</view>
				<view class="imgs">
					<!-- 					<image v-for="(src,i) in item.image" :src="src" /> -->
					<u-album :urls="item.image" rowCount="3"></u-album>
				</view>
				<view class="hr"></view>
			</view>
			<view class="good" style="padding:0 1.5vw">
				<text>给医生个鼓励：</text>
				<image src="https://new.kuxia.top/uploads/image/20221001/1ace1a69a117b8e54485767ad7fcac65.png"
					@click="giveClick" v-if="data.give === 2" />
				<image src="https://new.kuxia.top/uploads/image/20221001/daf3f489e00ce324dbfe669c15cbe097.png"
					@click="disabledGive" v-if="data.give === 1" />
			</view>
			<view class="hr"></view>
			<view style="padding:0 1.5vw">
				<view>本次症状文字描述：</view>
				<view style="text-indent:2em;margin:1vh 0 2vh 0;">{{ data.txt }}</view>
			</view>
			<view class="hr"></view>
			<view style="padding:0 1.5vw">
				<view>医生回复：</view>
				<view v-if="data.reply && data.reply.length"></view>
				<u-empty mode="list" text="暂无回复" v-if="!data.reply && !data.reply.length">
				</u-empty>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {
	recordDetail,
	give,
} from '../../request/index.js'
// const bgAudioManager = uni.getBackgroundAudioManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
	data() {
		return {
			data: '',
			list: [],
			giveAfter: false,
		}
	},
	onShow() {

	},
	onLoad({
		id
	}) {
		recordDetail({
			id: id
		}).then(res => {
			console.log(res.data.list);
			this.data = res.data.list;
			this.list = [{
				pusherText: '第一次出现症状描述及用药史：',
				imageText: '第一次出现症状及用药图片：',
				pusher: res.data.list.first.split(','),
				image: res.data.list.first_imgs,
				playerStatus: res.data.list.first.split(',').map(() => false)
			},
			{
				pusherText: '最近一次症状描述及症状史：',
				imageText: '最近一次症状及症状照片：',
				pusher: res.data.list.lately.split(','),
				image: res.data.list.lately_imgs,
				playerStatus: res.data.list.lately.split(',').map(() => false)
			},
			{
				pusherText: '本次出现症状：',
				imageText: '本次出现症状照片：',
				pusher: res.data.list.today.split(','),
				image: res.data.list.today_imgs,
				playerStatus: res.data.list.today.split(',').map(() => false)
			},
			];
			console.log(this.list);


		})
		innerAudioContext.onPlay(() => {

		})
		innerAudioContext.onStop(() => {

		})
		console.log(innerAudioContext);
		innerAudioContext.onEnded(() => {

			console.log(`播放完毕`);
			console.log(11);
			this.list.forEach(v => {
				v.playerStatus = v.playerStatus.map(item => false)
			})
			console.log(this.list);
		})
	},
	methods: {
		giveClick() {
			give({
				id: this.data.doctorid,
				lid: this.data.id
			}).then(res => {
				console.log(res);
				if (res.data.status) {
					this.$refs.uToast.show({
						message: res.data.msg,
					})
					this.data.give = 1;
				}
			})
		},
		disabledGive() {
			this.$refs.uToast.show({
				message: '请勿重复点赞',
			})
		},
		stopPlayerPusher(src, i, index) {

			innerAudioContext.stop();
			this.list[index].playerStatus[i] = false;
			console.log(this.list);
		},
		player(src, i, index) {
			this.list.forEach(v => {
				v.playerStatus = v.playerStatus.map(item => false);
			})

			innerAudioContext.src = src;
			innerAudioContext.play();
			console.log(src);
			console.log(i, index);
			this.list[index].playerStatus[i] = true;
		},
	},
}
</script>

<style lang="scss">
page {
	background: #f3f3f3;
}

.album {
	display: flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.good {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;

	>text {
		font-size: 18px;
	}

	>image {
		width: 10vw;
		height: 10vw;
	}
}

.list {
	padding: 0 1.5vw;

	.title {
		font-size: 15px;
	}

	>.player {
		display: flex;

		>view {
			>image {
				width: 10vw;
				height: 10vw;
				margin: 1vh 2.5vw 1vh 0;
			}
		}
	}

	>.imgs {
		display: flex;
		margin: 1vh 0;

		>image {
			width: 14vw;
			height: 14vw;
			margin-right: 2vw;
		}
	}
}

.box {
	margin: 2vh 3.5%;
	background: white;
	padding: 1vh 2%;
	box-sizing: border-box;
	border-radius: 10px;
}

.reserveTime {
	display: flex;
	justify-content: space-around;
	font-size: 15px;
}

.hr {
	height: 1px;
	background: #d6d7d9;
	width: 100%;
	transform: scaleY(.5);
	margin: 1vh 0;
}
</style>
